<template>
  <div :class="searchClass">
    <div :class="searchClass + '-head-input-content'">
      <div :class="searchClass + '-head-input'">
        <a-input @keyup.enter.native="onSearch" placeholder="搜索" allow-clear>
          <a-icon
            slot="prefix"
            type="search"
            :style="{
              color: '#999b9e',
            }"
          />
        </a-input>
        <div :class="searchClass + '-head-back'" @click="$emit('close-search')">
          取消
        </div>
      </div>
    </div>
    <a-list
      v-if="searchArr && searchArr.length !== 0"
      :class="searchClass + '-head-list-content'"
      :data-source="searchArr"
    >
      <a-list-item
        @click="searchItemClick(item)"
        slot="renderItem"
        slot-scope="item"
      >
        <div class="list-content">
          <span class="search-list-text">
            <span
              class="search-tip"
              :style="{ color: searchMap[item.belong].color || 'black' }"
              >[{{ searchMap[item.belong].label }}]</span
            >
            {{ item.subject || item.defName }}</span
          >
          <span class="search-list-icon-content">
            <img class="search-list-icon" src="~@/assets/img/search-list.png"
          /></span>
        </div>
      </a-list-item>
    </a-list>
    <img
      v-show="emptyImg"
      class="home-search-empty"
      src="~@/assets/img/empty.png"
    />
    <div v-show="isSearchLoading" class="home-search-empty">
      <a-icon
        :style="{ fontSize: '32px', color: '#999b9e' }"
        type="loading-3-quarters"
        spin
      />
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
/*eslint-disable*/
import {
        getSidByDefKey,
   } from '@/api/itemLayout';
   import {globalSearchList} from '@/api/home/index'
export default {
  data() {
    return {
      searchMap:{
        'approveHistoryList':{
          label:'已办',
          color:'#16BC83'
        },
        'applyList':{
          label:'申请',
          color:'#3296FA'
        },
        'carbonCopyList':{
          label:'抄送',
          color:'#3296FA'
        },
        'draftList':{
          label:'草稿',
          color:'#FE933D'
        },
        'todoList':{
          label:'待办',
          color:'#16BC83'
        },
      },
      emptyImg:false,
      searchClass: 'searchglobal',
      searchArr:[],
      isSearchLoading:false
    }
  },
  methods: {
    async searchItemClick(item){
            let enterpriseId, sId, id, key, formGuid, responseUrl, tableId, fileType
            enterpriseId = localStorage.getItem('enterpriseId')
            const obj = {
                key: item.defKey
            }
            await this.getSidByDefKey(obj).then(({sid,responseUrl1,tableId1,fileType1})=>{
                sId = sid
                fileType = fileType1
                responseUrl = responseUrl1
                tableId = tableId1
            })
            if (item.belong && item.belong === 'todoList') {
              sessionStorage.setItem("showSPBtns", 1);
            }
            if (sId) {
                const showSPBtns = sessionStorage.getItem('showSPBtns');
                let params = 'a'
                console.log(item);
                params += `&title=${item.subject}&sid=${sId}`
                params += `&enterpriseId=${enterpriseId}`
                params += `&assigneeNames=${item.assigneeNames}`
                params += `&instId=${item.instId}`
                params += `&taskId=${item.taskId}`
                params += `&nodeId=${item.nodeId}`
                params += `&defId=${item.defId}`
                params += `&formName=${item.formName}`
                params += `&responseUrl=${responseUrl}`
                params += `&tableId=${tableId}`
                params += `&showSPBtns=${showSPBtns}`
                params += `&fileType=${fileType}`
                if (item.bizKey) {
                    formGuid = item.bizKey
                }
                params += `&formGuid=${formGuid}`
                this.$router.push(`/detailPage?${params}`)
            }
        },
    debounce(fun,delay){
      let timer = null
      return (...args) => {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          fun.apply(this,args)
        }, delay);
      }
    },
    async onSearch(e){
      if (this.isSearchLoading) {
        return
      }
      this.emptyImg = false
      const search = e.target._value
      let result
      if (search) {
        this.isSearchLoading = true
        result = await this.getSearch(e.target.value)
        this.isSearchLoading = false
      }else{
        result = []
      }
      if (result.code === 200 && result.success) {
        /*
          approveHistoryList //已办
          applyList //申请
          carbonCopyList //抄送
          draftList // 草稿
          todoList // 待办
        */
       const arr = []
        for(let key in result.data){
          if (result.data[key].rows && result.data[key].rows.length) {
            result.data[key].rows.map(item => {
              item.belong = key
              arr.push(item)
            })
          }
        }
        this.searchArr = arr
        if (!this.searchArr.length) {
          this.emptyImg = true
        }
      }else{
        this.emptyImg = true
        this.searchArr = []
        if (search !== '') {
          this.$message.warning(result.message)
        }
      }
    },
    async getSearch(str){
      const obj ={
                "order":"asc",
                "offset":"0",
                "limit":"50",
                "task.subject_^VLK":str
            }
            return await globalSearchList(obj)

    },
    async getSidByDefKey(data){
            let obj = {}
           await getSidByDefKey(data).then(res=>{
                if (res.code === 200 && res.success) {
                    if (res.data.sId) {
                        obj.sid = res.data.sId
                        obj.responseUrl1 = res.data.responseUrl
                        obj.tableId1 = res.data.tableId || res.data.budgetTableId
                        obj.fileType1 = res.data.fileType
                    }
                }else{
                    this.$message.error(res.message)
                }
            })
            return new Promise((resolve)=> resolve(obj))
        },
  },
  created() {
    this.onSearch = this.debounce(this.onSearch, 300)
  },
}
</script>

<style lang="less" scoped>
.searchglobal-head-input-content {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 99;
  .searchglobal-head-input {
    padding: 8px 0 8px 16px;
    background-color: #fff;
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 4fr 0.8fr;
    align-items: center;
    /deep/ .ant-input {
      border: none;
      outline: none;
      background-color: #ededee;
    }
    /deep/ .ant-input-affix-wrapper .ant-input:focus {
      border: 1px solid #ededee;
      box-shadow: 0 0 0 2px #191f251e;
    }
    .searchglobal-head-back {
      font-size: 17px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      text-align: center;
      width: 100%;
    }
  }
}
.searchglobal-head-list-content {
  margin-top: 48px;
  .search-list-icon-content {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    .search-list-icon {
      width: 12px;
      height: 12px;
    }
  }
}
/deep/ .ant-list-items {
  background-color: #ffffff;
}
/deep/ .ant-list-item {
  border-bottom: 1px solid #e8e8e8;
  margin-left: 20px;
  margin-right: 12px;

  font-size: 17px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}
.list-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 7px 0;
  .search-list-text {
    flex: 12;
  }
  .search-list-icon-content {
    flex: 1;
    margin-left: 5px;
    display: flex;
    justify-content: center;
  }
}
.home-search-empty {
  width: 121px;
  height: 131px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -80%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-tip {
  font-size: 12px;
}
.home-search-loadgin {
  width: 100%;
  height: 100%;
}
</style>
